<!-- 每日打板统计 -->
<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" style="width: 100%" v-if="headerShow">
        <a-form size="small" :model="pageData.searchData">
              <a-form-item label="开单日期"  label-col-flex="80px" :style="{width:'320px'}">
                <a-range-picker  popup-container="html"  class="bacClass" @select="onSelect" />
              </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="changHeadShow(false)"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding: 10px">
        <Toolbar
          :items="['查询', '打印', '导出']"
          @select="selectHandler"
          @export="exportHandler"
          @dyBoufei="dyBoufeiHandler"
        />
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%"
        class="ag-theme-alpine"
        :defaultColDef="defaultColDef"
        :rowData="pageData.dataArr"
        :columnDefs="cfsValue"
        :localeText="localeTextData"
        :suppressRowClickSelection="true"
      />
    </template>
  </PageTabelLayout>

  <a-modal v-model:visible="pageData.showPrint" title="打印预览" :width="1500">
    <div id="printCont" class="printCont">
      <h3 class="Head3">实验室打板每日汇总表</h3>
      <div class="secondTitle">{{ pageData.printDate }}</div>
      <table class="mytable">
        <thead>
          <tr>
            <th :rowspan="2">日期</th>
            <th :colspan="5">复办</th>
            <th :colspan="5">放样</th>
            <th :colspan="7">打板</th>
          </tr>
          <tr>
            <th>昨日余量</th>
            <th>当日来办数</th>
            <th>当日OK数</th>
            <th>当日余量</th>
            <th>备注</th>
            <th>昨日余量</th>
            <th>当日来办数</th>
            <th>当日OK数</th>
            <th>当日余量</th>
            <th>备注</th>
            <th>昨日余量</th>
            <th>翻打数</th>
            <th>当日来办数</th>
            <th>当日送办数</th>
            <th>当日OK数</th>
            <th>当日余量</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in pageData.printDataList">
            <td></td>
            <td>{{ item.fuban_ztyl }}</td>
            <td>{{ item.fuban_dt }}</td>
            <td>{{ item.fuban_ok }}</td>
            <td>{{ item.fuban_dryl }}</td>
            <td>{{ item.fuban_remark }}</td>
            <td>{{ item.fanyang_ztyl }}</td>
            <td>{{ item.fanyang_dt }}</td>
            <td>{{ item.fanyang_ok }}</td>
            <td>{{ item.fanyang_dryl }}</td>
            <td>{{ item.fanyang_remark }}</td>
            <td>{{ item.daban_ztyl }}</td>
            <td>{{ item.daban_fdNum }}</td>
            <td>{{ item.daban_dt }}</td>
            <td>{{ item.daban_djNum }}</td>
            <td>{{ item.daban_ok }}</td>
            <td>{{ item.daban_dryl }}</td>
            <td>{{ item.daban_remark }}</td>
          </tr>
          <tr>
            <td>合计</td>
            <td>{{ pageData.fuban_ztylAll }}</td>
            <td>{{ pageData.fuban_dtAll }}</td>
            <td>{{ pageData.fuban_okAll }}</td>
            <td>{{ pageData.fuban_drylAll }}</td>
            <td></td>
            <td>{{ pageData.fanyang_ztylAll }}</td>
            <td>{{ pageData.fanyang_dtAll }}</td>
            <td>{{ pageData.fanyang_okAll }}</td>
            <td>{{ pageData.fanyang_drylAll }}</td>
            <td></td>
            <td>{{ pageData.daban_ztylAll }}</td>
            <td>{{ pageData.daban_fdNumAll }}</td>
            <td>{{ pageData.daban_dtAll }}</td>
            <td>{{ pageData.daban_djNumAll }}</td>
            <td>{{ pageData.daban_okAll }}</td>
            <td>{{ pageData.daban_drylAll }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <template #footer>
      <div style="text-align: center">
        <a-button @click="pageData.showPrint = false">关闭</a-button>
        <a-button @click="vPrintClick" style="margin-left: 20px" type="primary">打印</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { reactive, ref, onMounted } from 'vue'
  import { useTable, useRowKey, useRowSelection } from '@/hooks/table'
  import { StrikeBord } from '@/api/laboratory/index'
  import PageTabelLayout from '../pageTabelLayout.vue'
  
  import { localeText } from '@/api/aggridZw'
  import emitter from '@/hooks/useEventBus'
  import { Message } from '@arco-design/web-vue'
  import { assTable } from '@/utils/assemblyLevelTable'
  import printJS from 'print-js'
  import dayjs from 'dayjs'
  export default {
    name: 'DaliyPunchingStatistics',
    setup() {
      onMounted(() => {
        // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
        selectHandler()
        emitter.on('refresh-DaliyPunchingStatistics', () => {
          selectHandler()
        })
      })
      let changHeadShow = (boolVal: boolean) => {
        headerShow.value = boolVal
        emitter.emit('window-change')
      }
      const StrikeBordApi = StrikeBord()
      const selectHandler = async () => {
        doRefresh()
      }
      //导出
      const exportHandler = () => {
        let selectList = gridOption.value.getSelectedRows()
        if (selectList.length === 0) {
          Message.error('请勾选需要导出的数据')
          return
        } else {
          let nowRow = table.dataList.filter(function (o) {
            return (
              gridOption.value
                .getSelectedRows()
                .map((o: any) => {
                  return o.id
                })
                .indexOf(o['id']) !== -1
            )
          })
          assTable(cfsValue, nowRow, '每日打板数据')
        }
      }

      const dyBoufeiHandler = () => {
        //
        let selectList = gridOption.value.getSelectedRows()
        if (selectList.length === 0) {
          Message.error('请勾选需要打印的数据')
          return
        } else {
          pageData.showPrint = true
          pageData.printDataList = selectList
          pageData.printDate = dayjs(new Date()).format('YYYY-MM-DD')
          selectList.forEach((v: any) => {
            if (v.fuban_ztyl) {
              pageData.fuban_ztylAll += v.fuban_ztyl
            }
            if (v.fuban_dt) {
              pageData.fuban_dtAll += v.fuban_dt
            }
            if (v.fuban_ok) {
              pageData.fuban_okAll += v.fuban_ok
            }
            if (v.fuban_dryl) {
              pageData.fuban_drylAll += v.fuban_dryl
            }
            if (v.fanyang_ztyl) {
              pageData.fanyang_ztylAll += v.fanyang_ztyl
            }
            if (v.fanyang_dt) {
              pageData.fanyang_dtAll += v.fanyang_dt
            }
            if (v.fanyang_ok) {
              pageData.fanyang_okAll += v.fanyang_ok
            }
            if (v.fanyang_dryl) {
              pageData.fanyang_drylAll += v.fanyang_dryl
            }
            if (v.daban_ztyl) {
              pageData.daban_ztylAll += v.daban_ztyl
            }
            if (v.daban_fdNum) {
              pageData.daban_fdNumAll += v.daban_fdNum
            }
            if (v.daban_dt) {
              pageData.daban_dtAll += v.daban_dt
            }
            if (v.daban_djNum) {
              pageData.daban_djNumAll += v.daban_djNum
            }
            if (v.daban_ok) {
              pageData.daban_okAll += v.daban_ok
            }
            if (v.daban_dryl) {
              pageData.daban_drylAll += v.daban_dryl
            }
          })
        }
      }
      const onSelect = (date: any) => {
        pageData.searchData.startDay = date ? date[0] : ''
        pageData.searchData.endDay = date ? date[1] : ''
        doRefresh()
      }
      const pageData = reactive<{
        pageLoading: boolean
        showPrint: boolean
        dataArr: any[]
        printDataList: any[]
        fuban_ztylAll: number
        fuban_dtAll: number
        fuban_drylAll: number
        fuban_okAll: number
        fanyang_ztylAll: number
        fanyang_dtAll: number
        fanyang_okAll: number
        fanyang_drylAll: number
        daban_ztylAll: number
        daban_fdNumAll: number
        daban_dtAll: number
        daban_djNumAll: number
        daban_okAll: number
        daban_drylAll: number
        printDate: string
        searchData: {
          startDay: string
          endDay: string
        }
      }>({
        searchData: {
          startDay: dayjs(new Date()).format('YYYY-MM-DD'),
          endDay: dayjs(new Date()).format('YYYY-MM-DD'),
        },
        showPrint: false,
        pageLoading: false,
        dataArr: [],
        printDataList: [],
        fuban_ztylAll: 0,
        fuban_dtAll: 0,
        fuban_drylAll: 0,
        fuban_okAll: 0,
        fanyang_ztylAll: 0,
        fanyang_dtAll: 0,
        fanyang_okAll: 0,
        fanyang_drylAll: 0,
        daban_ztylAll: 0,
        daban_fdNumAll: 0,
        daban_dtAll: 0,
        daban_djNumAll: 0,
        daban_okAll: 0,
        daban_drylAll: 0,
        printDate: '',
      })
      const doRefresh = async () => {
        pageData.pageLoading = true
        await StrikeBordApi.getBordSelectList({ ...pageData.searchData })
          .then((res) => {
            // console.log(res);

            if (res.code === 200) {
              let data = res.data
              let dataArr = []
              for (let key in data) {
                for (let props in data[key]) {
                  dataArr.push({ [`${key}_${props}`]: data[key][props] })
                }
              }
              // console.log(dataArr);
              pageData.dataArr = changeArr(dataArr)
              // console.log(changeArr(dataArr));
              gridOption.value.setRowData(pageData.dataArr)
            } else {
              Message.error('查询失败')
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      const changeArr = (arr: any) => {
        let firstArr: any[] = []
        let secondArr: any[] = []
        arr.forEach((v: any) => {
          for (let sKey in v) {
            secondArr.push({
              key: sKey,
              val: v[sKey],
            })
            let numberKey = sKey.replace(/[^\d]/g, '')
            if (firstArr.indexOf(numberKey) == -1) {
              firstArr.push(numberKey)
            }
          }
        })

        let threeArr = new Array(firstArr.length).fill({})
        firstArr.forEach((item, index) => {
          secondArr.forEach((v) => {
            if (item == v.key.replace(/[^\d]/g, '')) {
              threeArr[index][v.key.replace(/[^a-z_A-Z]/g, '')] = v.val
            }
          })
        })
        return threeArr
      }
      let cfsValue: any[] = [
        {
          headerName: '开单日期',
          field: 'callDate',
          pinned: 'fixed',
        },
        {
          headerName: '复办',
          pinned: 'fixed',
          children: [
            {
              headerName: '昨日余量',
              field: 'fuban_ztyl',
              pinned: 'fixed',
            },
            {
              headerName: '当日来办数',
              field: 'fuban_dt',
              pinned: 'fixed',
            },
            {
              headerName: '当日OK数',
              field: 'fuban_ok',
              pinned: 'fixed',
            },
            {
              headerName: '当日余量',
              field: 'fuban_dryl',
              pinned: 'fixed',
            },
            {
              headerName: '备注',
              field: 'remark',
              pinned: 'fixed',
            },
          ],
        },
        {
          headerName: '放样',
          pinned: 'fixed',
          children: [
            {
              headerName: '昨日余量',
              field: 'fanyang_ztyl',
              pinned: 'fixed',
            },
            {
              headerName: '当日来办数',
              field: 'fanyang_dt',
              pinned: 'fixed',
            },
            {
              headerName: '当日OK数',
              field: 'fanyang_ok',
              pinned: 'fixed',
            },
            {
              headerName: '当日余量',
              field: 'fanyang_dryl',
              pinned: 'fixed',
            },
            {
              headerName: '备注',
              field: 'remark',
              pinned: 'fixed',
            },
          ],
        },
        {
          headerName: '打板',
          pinned: 'fixed',
          children: [
            {
              headerName: '昨日余量',
              field: 'daban_ztyl',
              pinned: 'fixed',
            },
            {
              headerName: '翻打数',
              field: 'daban_fdNum',
              pinned: 'fixed',
            },
            {
              headerName: '当日来办数',
              field: 'daban_dt',
              pinned: 'fixed',
            },
            {
              headerName: '当日送办数',
              field: 'daban_djNum',
              pinned: 'fixed',
            },
            {
              headerName: '当日OK数',
              field: 'daban_ok',
              pinned: 'fixed',
            },
            {
              headerName: '当日余量',
              field: 'daban_dryl',
              pinned: 'fixed',
            },
            {
              headerName: '备注',
              field: 'remark',
              pinned: 'fixed',
            },
          ],
        },
        {
          headerName: '制单人',
          field: 'serial',
          pinned: 'fixed',
        },
        {
          headerName: '建立人',
          field: 'createName',
          pinned: 'fixed',
        },
        {
          headerName: '建立日期',
          field: 'createTime',
          pinned: 'fixed',
        },
        {
          headerName: '备注',
          field: 'remark',
          pinned: 'fixed',
        },
      ]

      const scrollbar = ref(true)
      const { selectedRowKeys } = useRowSelection()
      const rowKey = useRowKey('id')
      const table = useTable()
      // const pagination = usePagination(doRefresh);
      const headerShow = ref<boolean>(true)

      //表格方面
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        // gridOption.value.loading
        //调整表格自适应大小
        // gridOption.value.sizeColumnsToFit();
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1,
        width: 150,
      }
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      cfsValue = a.concat(cfsValue)
      // console.log(cfsValue);
      // const total = ref(10);
      const changePage = (val: any) => {
        // pagination.page = val
        doRefresh()
      }
      const changeSize = (val: any) => {
        // pagination.pageSize = val
        doRefresh()
      }

      const localeTextData: any = ref(localeText)

      const vPrintClick = () => {
        printJS({
          printable: 'printCont',
          type: 'html',
          targetStyles: ['*'],
        })
      }

      return {
        selectHandler,
        exportHandler,
        dyBoufeiHandler,
        onSelect,
        pageData,
        scrollbar,
        rowKey,
        selectedRowKeys,
        table,
        headerShow,
        changePage,
        changeSize,
        localeTextData,
        defaultColDef,
        gridReady,
        cfsValue,
        changHeadShow,
        vPrintClick,
      }
    },
    components: { PageTabelLayout,  },
  }
</script>

<style lang="less" scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  .aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
  }

  .printCont {
    text-align: center;

    .Head3 {
      font-size: 25px;
      font-weight: bold;
    }

    .secondTitle {
      display: flex;
      font-size: 18px;
      justify-content: center;
    }

    .headTop {
      margin-top: 20px;
    }

    .mytable {
      width: 100%;

      th,
      td {
        padding: 5px;
        border: 1px solid #e3e3e3;
      }

      th {
        background: rgb(247, 248, 250);
      }
    }
  }
  :deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>
